<html>
<head>
	<META http-equiv="Content-Type" content="text/html;charset=utf-8"></META>
	<TITLE>FreeSWITCH Video Flash Phone Demo</TITLE>

	<script type="text/javascript" src="swfobject.js"></script>
	<script type="text/javascript" src="jquery.min.js"></script>

	<script type="text/javascript" charset="utf-8">
		var flashvars = {
			rtmp_url: 'rtmp://' + document.location.hostname + '/phone',
			local_loopback: 2, // x pos if local video
			buffer_time: 0,
			width: 640,
			height: 480,
			display_width: 640,
			display_height: 480
		};

		var params	= {
			allowScriptAccess: 'always',
			wmode: 'window'
		};

		var current_uuid = "uuid";
		var flash;

		function log(msg) {
			if ('console' in window) console.log(msg);
		}

		function login() {
				flash.login($('#user').val(), '1234');
		}

		function register() {
				flash.register($('#user').val(), 'Test');
		}

		function unregister() {
				flash.register($('#user').val(), 'Test');
		}

		function makeCall() {
				flash.makeCall($('#dest').val(), '', {wantVideo: "true", incomingBandwidth: "1mb"});
		}

		function hangup() {
				flash.hangup(current_uuid);
		}

		function answer() {
			flash.answer(current_uuid);
		}

		function settings() {
			flash.showPrivacy();
		}

		function send_dtmf(digit) {
			flash.sendDTMF(digit, 2000);
		}

		function onDisplayUpdate(uuid, name, number){
			log("DisplayUpdate -- uuid: " + uuid + " name: " + name + " number: " + number);
		}
		function onCallState(uuid, state){
			log("CallState -- uuid: " + uuid + " state: " + state);
			$('#status').html(state);
		}
		function onIncomingCall(uuid, name, number, account, evt){
			log("IncomingCall -- uuid: " + uuid + " name: " + name + " number: " + number + " account: " + account);
			log(evt);
			if (current_uuid == "uuid") {
				var want_video = "";

				current_uuid = uuid;

				if (typeof(evt) === "object" && evt.want_video == "true") {
					want_video = " (Video)";
				}

				$('#incoming_call').html("Incoming call " + uuid + " from '" + name + "' <" + number + ">" + want_video);
			} else {
				$("#flash")[0].hangup(uuid);
			}
		}
		function onDisconnected(){
			log("socket disconnected");
			$('#status').html('Disconnected');
			$('#reconnect').show();
		}
		function onMakeCall(uuid, number, account){
			log("MakeCall -- uuid: " + uuid + " account: " + account + " number: " + number);
			current_uuid = uuid;
		}
		function onHangup(uuid, cause){
			log("Hangup -- uuid: " + uuid + " cause: " + cause);
			current_uuid = "uuid";
			$('#status').html("Hangup " + cause);
		}
		function onDebug(message){
			log("debug -- " + message);
		}
		function onAttach(uuid){
			log("Attach -- " + uuid);
		}
		function onConnected(session_id){
			log("Connected -- sessionid: " + session_id);
			$('#session_id').html(session_id);
			$('#status').html('Connected');
			$('#reconnect').hide();
		}
		function onLogin(status, user, domain){
			log("Login -- status: " + status + " user: " + user + " domain: " + domain);
		}
		function onLogout(user, domain){
			log("Logout -- user: " + user + " domain: " + domain);
		}
		function onInit(){console.log('initing...');}
	</script>

</head>

<body>

	<div id="dialpad" style="float:left;width:300px">
		<table border="1" cellspacing="5" cellpadding="5" width="200">
			<tr>
				<th colspan = 3>Flash Phone</th>
			</tr><tr>
				<td colspan = 3>
					<input type="text" name="x" value="9196" id="dest" size = "10">
				</td>
			</tr><tr>
				<td><input type="button" name="k7" value="7" id="k7" onclick="send_dtmf('7')"></td>
				<td><input type="button" name="k7" value="8" id="k7" onclick="send_dtmf('8')"></td>
				<td><input type="button" name="k7" value="9" id="k7" onclick="send_dtmf('9')"></td>
			</tr><tr>
				<td><input type="button" name="k7" value="4" id="k7" onclick="send_dtmf('4')"></td>
				<td><input type="button" name="k7" value="5" id="k7" onclick="send_dtmf('5')"></td>
				<td><input type="button" name="k7" value="6" id="k7" onclick="send_dtmf('6')"></td>
			</tr><tr>
				<td><input type="button" name="k7" value="1" id="k7" onclick="send_dtmf('1')"></td>
				<td><input type="button" name="k7" value="2" id="k7" onclick="send_dtmf('2')"></td>
				<td><input type="button" name="k7" value="3" id="k7" onclick="send_dtmf('3')"></td>
			</tr><tr>
				<td><input type="button" name="k7" value="*" id="k7" onclick="send_dtmf('*')"></td>
				<td><input type="button" name="k7" value="0" id="k7" onclick="send_dtmf('0')"></td>
				<td><input type="button" name="k7" value="#" id="k7" onclick="send_dtmf('#')"></td>
			</tr><tr>
				<td colspan="3">
					<span id="status">Ready</span>
					<span id="reconnect" style="display:none">
						<a href='#' onclick="flash.connect();return false;">Reconnect</a>
					</span>
				</td>
			</tr>
		</table>
	</div>

	<div>
		SessionID: <span id = "session_id"></span><br>
		Incoming:  <span id = "incoming_call"></span>

		<br>
		<input type="text" name="user" value="1019@192.168.7.4" id="user">
		<input type="button" name="Call" value="Login" onclick = "login()" id="Login">
		<input type="button" name="Register" value="Register" onclick = "register()" id="Register">
		<input type="button" name="Register" value="UnRegister" onclick = "unregister()" id="UnRegister">
		<br>
		<input type="button" name="Call" value="Call" onclick = "makeCall()" id="Call">
		<input type="button" name="Call" value="Hangup" onclick = "hangup()" id="Hangup">
		<input type="button" name="some_name" value="Answer" id="some_name" onclick="answer()">
		<input type="button" name="some_name" value="Settings" id="some_name" onclick="settings()">
	</div>

	<div style="border:0px solid blue;float:left;padding:0px">
		<div id="flash">
				<h1>Alternative content</h1>
				<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
	</div>

	<br style="clear:both">

	<script type="text/javascript" charset="utf-8">

		$(document).ready(function() {
			swfobject.embedSWF("freeswitch-h264.swf", "flash", "640", "480", "11.2.202.229", "expressInstall.swf", flashvars, params, []);
			flash = $('#flash')[0];

			$('#user').val("1000@" + window.location.hostname);

		});
	</script>

</body>
</html>
